<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for指令测试</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--
    功能:
        使用v-for来遍历数组和对象数组.
    说明:
        1. `v-for="(item, index) in arr"`指令中, (item, index)中:
            - item: 表示当前迭代的对象, 名称随便;
                1. 如果迭代的数据时对象, 就需要`对象名称.属性`这样点出对象的属性.
            - index: 表示当前迭代的索引, 名称随便.
    -->
    <ul>
        <li v-for="(item, index) in arr" v-bind:title="item">索引: {{index}}, 值为: {{item}}</li>
    </ul>
    <ul>
        <li v-for="(item, index) in objArr" v-bind:title="item.name">索引: {{index}}, 姓名: {{item.name}}, 年龄: {{item.age}}</li>
    </ul>
    <button v-on:click="add">添加一个</button>
    <button v-on:click="del">移除最左边的那个数据</button>

    <div>
        <ul>
            <li v-for="(value, key, index) in obj1">{{ index }}. {{ key }}: {{ value }}</li>
        </ul>
    </div>
</div>
</body>
<script>

    let app = new Vue({
        el: '#app',
        data: () => ({
            arr: ['天津', '北京', '陕西'],
            objArr: [
                {
                    name: '小王',
                    age: 18
                },
                {
                    name: '中王',
                    age: 28
                },
                {
                    name: '大王',
                    age: 38
                }
            ],
            obj1: {
                id: 1,
                name: "s1",
                age: 12
            }
        }),
        methods: {
            add: function () {
                //向arr中添加一个元素, 并返回新的长度
                this.objArr.push({name: '特王', age: 88});
            },
            del: function () {
                //移除数组最左边的那个数据
                this.objArr.shift();
            }
        }
    });

</script>
</html>